<template>
  <div class="home full-parent flex">
    <img src="../assets/img/img2.png" alt="metro" class="metro-img" />
    <img src="../assets/img/img8.png" alt="enter" class="enter-img" />
    <img src="../assets/img/img7.png" alt="lite" class="lite-img" />
    <img src="../assets/img/img11.png" alt="middle" class="middle-img" />
    <img src="../assets/img/img10.png" alt="font" class="font-img" />
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  created() {}
};
</script>

<style scoped>
body img {
  user-select: none;
  pointer-events: none;
}

.home {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #090f38 url("../assets/img/img1.png") left top / cover no-repeat;
}

.metro-img {
  position: absolute;
  top: 9.1vw;
  right: 11vw;
  z-index: 2;
  width: 17.5vw;
  height: auto;
  animation: enter 8.5s infinite;
}

.lite-img {
  position: absolute;
  top: 13.3vw;
  left: 7vw;
  z-index: 2;
  width: 9.9vw;
  height: auto;
  animation: enter 7.5s infinite;
}

.enter-img {
  position: absolute;
  top: 7.4vw;
  left: 18.79vw;
  z-index: 2;
  width: 12.68vw;
  height: auto;
  animation: enter 8s infinite;
}

.middle-img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 32vw;
  height: auto;
  transform: translate3d(-50%, -50%, 0);
}

.font-img {
  position: absolute;
  top: 45%;
  left: 49%;
  z-index: 2;
  width: 17vw;
  height: 3.7805vw;
  transform: translate3d(-50%, -60%, 0);
  transform-origin: center center;
  animation: font 5s infinite;
}

@keyframes enter {
  0% {
    transform: translate3d(0, -4%, 0);
  }
  55% {
    transform: translate3d(0, 4%, 0);
    opacity: 0.75;
  }
  100% {
    transform: translate3d(0, -4%, 0);
  }
}

@keyframes font {
  0% {
    transform: translate3d(-50%, -60%, 0) scale(0.97);
  }
  55% {
    transform: translate3d(-50%, -60%, 0) scale(1.02);
    opacity: 0.75;
  }
  100% {
    transform: translate3d(-50%, -60%, 0) scale(0.97);
  }
}
</style>
